<template>
  <view style="margin: 20px;padding-bottom: 30px">
    <button type="primary" @click="verifyYzm" style="margin-top: 20px">验证</button>
    <view v-if="ticketInfo.length" class="card-layout ver-layout" style="background: #072bf5">
      <view class="title-view">客户端验证码生成的-ticket信息</view>
      <view v-for="(item,index) in ticketInfo" :key="index">
        {{ item }}
      </view>
    </view>
    <button type="primary" @click="copyTicket" style="margin-top: 20px">复制</button>
    <view class="card-layout ver-layout">
      <view class="title-view">流程记录：</view>
      <view v-for="(item,index) in logList" :key="index" :style="getTextStyle(item)">
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script>
import {loadScript} from "../../utils/utils"

export default {
  name: "tencent",
  data() {
    return {
      loadFinish: false,
      logList: [],
      ticketInfo: []
    }
  },
  onLoad() {
    if (typeof TencentCaptcha == 'undefined')
      loadScript("https://ssl.captcha.qq.com/TCaptcha.js", 'tencent')
          .then(res => {
            this.loadFinish = true
            console.log("loadScript=success", res)
          })
          .catch(err => {
            console.error("loadScript=error", err)
          })
    if (typeof returnCitySN == 'undefined')
      loadScript("http://pv.sohu.com/cityjson?ie=utf-8")
          .then(res => {
            console.log("loadScript=ip", returnCitySN)
            console.log("loadScript=ip", returnCitySN.cip)
          })
    // todo 校验不通过模拟
    // this.logList.push("2. 请求业务后台接口开始")
    // this.logList.push("2.1 业务后台请求腾讯验证码服务校验不通过！")
    // this.logList.push("2.2 业务后台请求不执行！")
  },
  methods: {
    getTextStyle(item) {
      let list = ['不通过', '不执行']
      return {color: list.find(lItem => item.indexOf(lItem) != -1) ? 'red' : '#007aff'}
    },
    verifyYzm() {
      this.logList.length = 0
      this.ticketInfo.length = 0
      let _this = this
      if (!this.loadFinish) uni.showToast({title: "js文件加载失败！"})

      // 定义回调函数
      function callback(res) {
        // 第一个参数传入回调结果，结果如下：
        // ret         Int       验证结果，0：验证成功。2：用户主动关闭验证码。
        // ticket      String    验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
        // CaptchaAppId       String    验证码应用ID。
        // bizState    Any       自定义透传参数。
        // randstr     String    本次验证的随机串，后续票据校验时需传递该参数。
        console.log('callback:0000000000', res);

        // res（用户主动关闭验证码）= {ret: 2, ticket: null}
        // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
        // res（请求验证码发生错误，验证码自动返回terror_前缀的容灾票据） = {ret: 0, ticket: "String", randstr: "String",  errorCode: Number, errorMessage: "String"}
        // 此处代码仅为验证结果的展示示例，真实业务接入，建议基于ticket和errorCode情况做不同的业务处理
        if (res.ret === 0) {
          // 复制结果至剪切板
          var str = '【randstr】->【' + res.randstr + '】    【ticket】->【' + res.ticket + '】';
          console.log("callback:11111", str)
          _this.ticketInfo.push('【randstr】->【' + res.randstr + '】')
          _this.ticketInfo.push('【ticket】->【' + res.ticket + '】')
          // _this.requestProcess('1' + res.ticket) //todo 后端校验不通过情况
          _this.logList.push("1. 前端人工校验成功！")
          _this.requestProcess(res.ticket)
        }
      }

      // 定义验证码js加载错误处理函数
      function loadErrorCallback() {
        var appid = '您的CaptchaAppId';
        // 生成容灾票据或自行做其它处理
        var ticket = 'terror_1001_' + appid + '_' + Math.floor(new Date().getTime() / 1000);
        callback({
          ret: 0,
          randstr: '@' + Math.random().toString(36).substr(2),
          ticket: ticket,
          errorCode: 1001,
          errorMessage: 'jsload_error'
        });
      }

      try {
        var captcha = new TencentCaptcha('198682483', callback, {});
        // 调用方法，显示验证码
        captcha.show();
      } catch (error) {
        // 加载异常，调用验证码js加载错误处理函数
        loadErrorCallback();
      }
    },
    requestProcess(token) {
      uni.showLoading({title: '加载中',})
      uniCloud.callFunction({
        name: 'captcha-power',
        data: {
          action: 'tencentVerify',
          ticket: token
        },
        success: res => {
          this.logList.push("2. 请求业务后台接口开始")
          console.log("requestProcess==========success", res)
          let result = res.result
          let {CaptchaCode, CaptchaMsg} = result
          this.logList.push("2.0 请求腾讯云验证码服务返回的结果：", JSON.stringify(result))
          if (CaptchaCode == 1) {
            this.logList.push("2.1 业务后台请求腾讯验证码服务校验通过！")
            this.logList.push("2.2 业务后台请求完成！")
          } else {
            this.logList.push("2.1 业务后台请求腾讯验证码服务校验不通过！")
            this.logList.push("2.2 业务后台请求不执行！")
          }
          uni.hideLoading()
        },
        fail: err => {
          console.error("requestProcess==========error", err)
          uni.hideLoading()
        }
      })
    },
    copyTicket() {
      uni.setClipboardData({data: this.ticket})
    }
  }
}
</script>

<style scoped>
.card-layout {
  margin: 10px;
  width: revert;
  background: #70c0ba;
  border-radius: 10px;
  padding: 10px 20px;
  color: white;
}

.title-view {
  color: white !important;
  width: revert;
  text-align: center;
}

.card-layout > * {
  color: #ffb307;
  margin-bottom: 10px;
  word-wrap: break-word;
}

.ver-layout {
  display: flex;
  flex-direction: column;
}
</style>
